<{extend name="Public:public0" /}>

<{block name="title"}>ES6 - 简写<{/block}>

<{block name="sidebar"}><{include file="Public:sidebar-Es6_simple" /}><{/block}>

<{block name="content"}>
<div class="content guide with-sidebar components-guide">
<h1>对象简写</h1>	
<h2 id="属性简写">
	<a href="#属性简写" class="headerlink" title="属性简写" data-scroll="">属性简写</a>
</h2>
<code class="prettyprint linenums">var&nbsp;foo&nbsp;=&nbsp;'bar';<br/>var&nbsp;baz&nbsp;=&nbsp;{foo:&nbsp;foo};&nbsp;&nbsp;//&nbsp;冒号:&nbsp;前后字面量一样时<br/>//&nbsp;等同于<br/>var&nbsp;baz&nbsp;=&nbsp;{foo};&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;等同于:&nbsp;{foo:&nbsp;'bar'}<br/><br/>function&nbsp;f(x,&nbsp;y)&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;{x,&nbsp;y};<br/>}<br/>//&nbsp;等同于<br/>function&nbsp;f(x,&nbsp;y)&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;{x:&nbsp;x,&nbsp;y:&nbsp;y};<br/>}<br/>//&nbsp;f(1,2)&nbsp;{x:1,&nbsp;y:2}
</code>

<br><br>

<h2 id="方法简洁">
	<a href="#方法简洁" class="headerlink" title="方法简洁" data-scroll="">方法简洁</a>
</h2>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">var</span><span class="pln">&nbsp;obj&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;method</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="str">'Hello!'</span><span class="pun">;</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L4"><span class="pun">}</span></li><li class="L5"><span class="com">//&nbsp;等同于</span></li><li class="L6"><span class="kwd">var</span><span class="pln">&nbsp;obj&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;method</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="kwd">function</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L8"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="str">'Hello!'</span><span class="pun">;</span></li><li class="L9"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L0"><span class="pun">}</span></li></ol></code>

<p>实际例子:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">var</span><span class="pln">&nbsp;</span><span class="typ">Person</span><span class="pln">&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;name</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="str">'张三'</span><span class="pun">,</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;birth</span><span class="pun">;</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;birth:&nbsp;birth</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;hello&nbsp;</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;hello:&nbsp;function()&nbsp;{}</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'我的名字是:&nbsp;'</span><span class="pun">,</span><span class="pln">&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">name</span><span class="pun">);</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L6"><span class="pun">}</span></li></ol></code>

<p>用于函数返回值 非常方便:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">function</span><span class="pln">&nbsp;getPoint</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">var</span><span class="pln">&nbsp;x&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="lit">1</span><span class="pun">;</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">var</span><span class="pln">&nbsp;y&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="lit">10</span><span class="pun">;</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="pun">(</span><span class="pln">x</span><span class="pun">,</span><span class="pln">&nbsp;y</span><span class="pun">);</span></li><li class="L4"><span class="pun">}</span></li><li class="L5"><span class="pln">getPoint</span><span class="pun">()</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;{x:1,&nbsp;y:10}</span></li></ol></code>

<p>CommonJS 模块中适合:</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">module</span><span class="pun">.</span><span class="pln">exports&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;getItem</span><span class="pun">,</span><span class="pln">&nbsp;&nbsp;</span><span class="com">//&nbsp;getItem:&nbsp;getItem</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;setItem</span><span class="pun">,</span><span class="pln">&nbsp;&nbsp;</span><span class="com">//&nbsp;setItem:&nbsp;setItem</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;clear&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;clear:&nbsp;clear</span></li><li class="L4"><span class="pun">}</span></li></ol></code>

<p>属性赋值器(setter) 和 取值器(getter):</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">var</span><span class="pln">&nbsp;cart&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;_wheels</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="lit">4</span><span class="pun">,</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">get</span><span class="pln">&nbsp;wheels&nbsp;</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_wheels</span><span class="pun">;</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">set</span><span class="pln">&nbsp;wheels&nbsp;</span><span class="pun">(</span><span class="pln">value</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L6"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_wheels&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;value</span><span class="pun">;</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L8"><span class="pun">}</span></li></ol></code>


</div>
<{/block}>
